<template>
  <div>
    <!-- 分类列表 -->
    <el-menu :default-active="activeIndex"
             style="padding:0 40px"
             class="el-menu-demo"
             mode="horizontal"
             @select="handleSelect"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item index="1">全部</el-menu-item>
      <el-submenu index="2">
        <template slot="title">前端组件 </template>
        <el-menu-item index="2-1">通用组件</el-menu-item>
        <el-menu-item index="2-2">小程序组件</el-menu-item>
        <el-menu-item index="2-3">App组件</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">前端模板</template>
        <el-menu-item index="3-1">通用模板</el-menu-item>
        <el-menu-item index="3-2">小程序模板</el-menu-item>
        <el-menu-item index="3-3">App模板</el-menu-item>
      </el-submenu>
      <el-menu-item index="4">后端插件</el-menu-item>
      <!-- <el-menu-item index="4"><a href="https://www.ele.me"
             target="_blank">订单管理</a></el-menu-item> -->
    </el-menu>
    <!-- 标签页 -->
    <div class="tabs"
         style="padding:0 40px">
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="最新上架"
                     name="first"></el-tab-pane>
        <el-tab-pane label="热门推荐"
                     name="second"></el-tab-pane>
        <el-tab-pane label="收藏插件"
                     name="third"></el-tab-pane>
        <el-tab-pane label="我的下载"
                     name="fourth"></el-tab-pane>
      </el-tabs>
      <el-input placeholder="输入关键词搜索"
                class="search"
                prefix-icon="el-icon-search"
                v-model="search">
      </el-input>
    </div>
    <!-- /标签页 -->
    <!-- 商品列表 -->
    <el-row :gutter="40"
            style="padding:0 40px">
      <el-col :span="4"
              v-for="(o, index) in 8"
              :key="o">
        <el-card :body-style="{ padding: '0px' }"
                 class="card">
          <img src="https://cdn.fastadmin.net/uploads/addons/example.png!/fwfh/300x200"
               data-src="https://cdn.fastadmin.net/uploads/addons/example.png!/fwfh/300x200"
               alt="开发示例"
               class="image">
          <div style="padding: 14px;">
            <span>开发示例</span>
            <div class="bottom clearfix">
              <time class="time">下载量</time>
              <el-button type="text"
                         class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- /商品列表 -->

    <!-- 分页 -->
    <el-pagination background
                   class="pages"
                   layout="prev, pager, next"
                   :total="1000">
    </el-pagination>
    <!-- /分页 -->
  </div>
</template>

<script>
export default {
  name: "appstore_appstore",
  components: {},
  props: {},
  data() {
    return {
      activeName: "",
      activeIndex: "1",
      search: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleClick(e) {
      console.log(e);
    },
    handleSelect(e) {
      console.log(e);
    },
  },
};
</script>

<style scoped lang="scss">
.text-line {
  display: flex;
  justify-content: center;
  margin: 40px;
  font-size: 48px;
  font-weight: 900;
}
.subtitle {
  display: flex;
  justify-content: center;
  color: #666;
  margin-bottom: 40px;
}
.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  .search {
    max-width: 400px;
  }
}
.el-col {
  margin-bottom: 40px;
  &:last-child {
    margin-bottom: 0;
  }
}
.card:hover {
  box-shadow: 0 4px 20px #666;
  transition: 0.5s all;
  transform: translateY(-4px);
}
.pages {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>